<template>
  <div class="page-item  page-callrecords">
    <div class="page-content" ref="pageTab">
      <div class="page-tab">
        <el-input
            type="text"
            placeholder="请输入商品名称进行搜索，可以直接回车搜索..."
            prefix-icon="el-icon-search"
            style="width: 500px;margin-left: 10px"
            v-model="searchname"
            clearable
            @clear="recover"
            @keydown.enter.native="search"></el-input>
        <el-button
            icon="el-icon-search"
            type="primary"
            style="margin-left: 30px"
            @click="search">搜索</el-button>
        <el-table
            :data="tableData"
            style="width: 100%;"
            border
            :header-cell-style="{ background: '#00abbe', color: '#fff' }">
          <el-table-column prop="id" label="id" align="center"></el-table-column>
          <el-table-column align="center" prop="name" label="商品名称"></el-table-column>
          <el-table-column align="center" prop="price" label="价格"></el-table-column>
          <el-table-column align="center" label="操作" width="500px">
            <template slot-scope="scope">
              <el-button size="mini" type="success" round disabled>微信支付</el-button>
              <el-button size="mini" type="primary" round @click="alibuy(scope.row)">支付宝支付</el-button>
              <el-button size="mini" type="danger" round @click="unionbuy(scope.row)">银联支付</el-button>
              <el-button size="mini" type="warning" icon="el-icon-circle-plus-outline" round @click="addtocart('123456789',scope.row)">加入购物车</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
      <el-button icon="el-icon-shopping-cart-2" round @click="linktocart" type="warning">查看我的购物车</el-button>
      <el-button icon="el-icon-house" round @click="linktohello" type="info">返回主页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Qs from 'qs'
export default {
  name: 'Fornt',
  data() {
    return {
      searchname:'',
      tableData: []
    }
  },
  created() {
    this.axios.get('/api/pricelist')
        .then(res => {
          this.tableData = res.data
        })
        .catch(function (error){
          console.log(error)
        })
  },
  methods:{
    //按名称查找商品
    search(){
      if(this.searchname != ''){
        this.axios.post('/api/searchbyname',Qs.stringify({name:this.searchname}))
            .then(res => {
              this.tableData = res.data
            })
            .catch(function (error){
              console.log(error)
            })
      }
      else{
        this.recover()
      }
    },
    //清除搜索后显示所有商品
    recover(){
      this.axios.get('/api/pricelist')
          .then(res => {
            this.tableData = res.data
          })
          .catch(function (error){
            console.log(error)
          })
    },
    //添加到购物车
    addtocart(userid,price){
      this.axios.post('/api/savetocart',{userid:userid,id:price.id,name:price.name,price:price.price})
                .catch(function (error){
                  console.log(error)
                })
    },
    //支付宝支付
    alibuy(data){
      this.axios.post('/api/alipay',{id:data.id,name:data.name,price:data.price})
                .then(res => {
                  document.querySelector('body').innerHTML = res.data
                  document.forms[0].submit()
                })
                .catch(function (error){
                  console.log(error)
                })
    },
    //银联支付
    unionbuy(data){
      this.axios.post('/api/unionpay',{id:data.id,name:data.name,price:data.price})
          .then(res => {
            document.querySelector('body').innerHTML = res.data
            document.forms[0].submit()
          })
          .catch(function (error){
            console.log(error)
          })
    },
    //跳转至购物车页面
    linktocart(){
      this.$router.push('/goodscart')
    },
    //返回主页
    linktohello(){
      this.$router.push('/')
    }
  }
}
</script>